<template>
  <f7-page
  @page:init="pageInit"
  @page:beforein="pageBeforeIn"
  @page:afterin="pageAfterIn"
  @page:beforeout="pageBeforeOut"
  @page:afterout="pageAfterOut"
  @page:beforeremove="pageBeforeRemove"
  >

    <f7-navbar title="Form" ></f7-navbar>
    
    <f7-list>
      <f7-list-item link="/about/" title="About"></f7-list-item>
      <f7-list-item link="/terms/" title="Form"></f7-list-item>
    </f7-list>

    <div class="box"><img src="@/images/music1.png" /></div>
    
  </f7-page>
</template>

<style lang="less" scoped>

.box{
  position: absolute;
  top: 500px;
  left: 0px;
  width: 375px;
  height: 375px;
  background: url(../images/music1.png);
}

</style>

<script>
import { TweenMax, TimelineMax, CSSPlugin } from "gsap/TweenMax";
import pxToViewport from "../components/utils/px-to-viewport.js"; // px to vw, pxToViewport(375)
var $f7; // Framework7 Object
var $; // Scoped Page DOM7 selector
var $$; // Global DOM7 selector

export default {

  data() {
    return {
      pageInSecond : 0.4,
      pageOutSecond : 0.4,
      pageInAnimation : true,
      pageOutAnimation : true,
    };
  },

  mounted() {
    var context = this;
    this.$f7ready((f7) => {
      $f7 = f7;
      $ = function(selector) { return f7.$(selector, context.$el); };
      $$ = f7.$;
    });
  },
  
  methods: {

    pageInit(event, page) {
      console.log(page.view.id + ': page init ' + page.route.path);
    },
    pageBeforeIn(event, page) {
      console.log(page.view.id + ': page before in ' + page.route.path);
      TweenMax.to($(".box"), 1, {left: pxToViewport(375)});
    },
    pageAfterIn(event, page) {
      console.log(page.view.id + ': page after in ' + page.route.path);

      setTimeout(function() {

        $f7.request.get('index-content.html', function (data) {
          console.log(data);
        });

      }, 5000) ;
      

    },
    pageBeforeOut(event, page) {
      console.log(page.view.id + ': page before out ' + page.route.path);
    },
    pageAfterOut(event, page) {
      console.log(page.view.id + ': page after out ' + page.route.path);
    },
    pageBeforeRemove(event, page) {
      console.log(page.view.id + ': page before remove ' + page.route.path);
    }
    
  },

}
</script>
